<template>
    <div>
        <!-- 操作日志 -->
        <div class="all-container">
            <el-row class="oper-rows">
                <el-col :span="24">
                    <div class="lf choose-title">操作时间</div>
                    <el-date-picker
                        v-model="dateFrom"
                        type="datetime"
                        placeholder="选择日期" class="lf" size="mini" style="width:200px">
                        </el-date-picker>
                        <div class="lf choose-title">&nbsp;&nbsp;至</div>
                        <el-date-picker
                        v-model="dateTo"
                        type="datetime"
                        placeholder="选择日期" class="lf" size="mini" style="width:200px">
                    </el-date-picker>
                </el-col>
            </el-row>
            <el-row class="oper-rows tag-line">
                <el-col :span="24">
                    <div class="lf choose-title">操作员</div>
                    <el-autocomplete v-model="user" placeholder="" size="mini" style="width:150px;" class="lf choose-input user-input op-input" :fetch-suggestions="querySearch"></el-autocomplete>
                    <div class="lf choose-title">模块</div>
                    <el-input v-model="modual" placeholder="" size="mini" style="width:150px;" class="lf choose-input user-input op-input"></el-input>
                    <div class="lf choose-title">操作类型</div>
                    <el-input v-model="type" placeholder="" size="mini" style="width:150px;" class="lf choose-input user-input op-input"></el-input>
                    <div class="lf choose-title">关键字</div>
                    <el-input v-model="key" placeholder="" size="mini" style="width:150px;" class="lf choose-input user-input op-input"></el-input>
                    <button class="check-btn rf" @click="check">
                    <img src="../../assets/imgs/xoperation_btn_icon_saixuan_default.png" alt="" class="btn-img">筛选</button>
                </el-col>
            </el-row>
            <!-- 表格栏 -->
            <avue-crud :data="operList.data" :option="operList.option" :page="operList.page"  @current-change="operPage"></avue-crud>
        </div>
    </div>
</template>

<script>
import qs from "qs";
export default {
  data: function() {
    return {
      dateFrom: "",
      dateTo: "",
      user: "",
      modual: "",
      type: "",
      key: "",
      operList: {
        page: {
          pageSizes: [10],
          total: 20,
          currentPage: 1,
          pageSize: 10,
        },
        data:[],
        option:{
          menu:false,
          page:true,
          column:[
            {
              label:"工号",
              prop:"oper_no"
            },
            {
              label:"姓名",
              prop:"oper_name"
            },
            {
              label:"操作时间",
              prop:"oper_time"
            },
            {
              label:"模块",
              prop:"module"
            },
            {
              label:"操作类型",
              prop:"type"
            },
            {
              label:"摘要",
              prop:"title"
            },
          ]
        }
      },
      userList:[],
      userID:""
    };
  },
  methods: {
    operPage(val){
      this.operList.page.currentPage=val;
      this.getOperList();
    },
    getOperList() {
      this.postRequest("/sys/log/list",{
        rows:10,
        page:this.operList.page.currentPage
      }).then(data => {
        this.operList.page.total=data.data.totalRow;
        this.operList.data=data.data.list;
      });
    },
    check() {
      this
        .postRequest(
          "/sys/log/list",
          {
            filterRules:JSON.stringify([
              {"field":"oper_time","op":"dge","value":this.dateFrom.slice(this.dateFrom.indexOf("[")+1,this.dateFrom.indexOf("]"))},{"field":"oper_time","op":"dle","value":this.dateTo.slice(this.dateTo.indexOf("[")+1,this.dateTo.indexOf("]"))},{"field":"oper_id","op":"eq","value":this.userID},{"field":"module","op":"cn","value":this.modual},{"field":"type","op":"cn","value":this.type},{"field":"title","op":"cn","value":this.key}
            ]),
            rows:10,
            page:this.operList.page.currentPage
          }
        )
        .then(data => {
          this.operList.page.total=data.data.totalRow;
          this.operList.data=data.data.list;
        });
    },
    getUserList(){
      this.userList=[];
      this.postRequest("/sys/user/listWithSpell").then(data=>{
        for(var item of data.data){
          this.userList.push({
            value:item.name,
            id:item.id
          });
        }
      })
    },
    querySearch(queryString,cb){
      var userLists = this.userList;
        var results = queryString ? userLists.filter(this.createFilter(queryString)) : userLists;
        // 调用 callback 返回建议列表的数据
        cb(results);
    },
    createFilter(queryString) {
        return (restaurant) => {
          return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
        };
      },
  },
  computed: {},
  watch: {
    user(){
      for(var item of this.userList){
        if(this.user==item.value){
          this.userID=item.id;
        }
      }
    }
  },
  mounted() {
    console.log("operLog");
    this.$emit("sendActive", "3-6");
    this.getOperList();
    this.getUserList();
  }
};
</script>
<style scoped src="../../assets/css/allManage/operLog.css">
</style>